<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clamp</title>
    <style>
        * {
            /* position */


            /* layout */


            /* box */


            /* font */


            /* visual */
            background: #bfa;

        }

        .main {
            /* box */
            width: 100%;

            /* font */
            text-align: center;
        }

        .main h1 {
            /* box */
            padding: 5px;

            /* font */
            text-align: justify;
            font-size: clamp(16px, 5vw, 30px);

            /* visual */
            background: red;
        }

        .main img {
            /* box */
            width: clamp(15vw, 800%, 100%);
            height: clamp(20vh, 100vw, 40vh);

            /* visual */
            object-fit: cover;
        }

        .main p {
            /* box */
            padding: 5px;

            /* font */
            text-align: justify;
            font-size: clamp(12px, 4vw, 20px);

            /* visual */
            background: yellow;
        }
    </style>
</head>

<body>
    <div class="main">
        <h1>this is Clamp Lorem ipsum dolor sit, amet consectetur adipisicing elit. Totam rerum similique est vel, porro
            dolores, dolorum in quam id ducimus autem? Veritatis inventore sit fugit modi fuga ex unde harum!</h1>
        <img src="https://images.pexels.com/photos/142497/pexels-photo-142497.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
            alt="">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, ipsam. Recusandae possimus accusantium
            nobis eos numquam autem pariatur harum consequatur. Alias quaerat cupiditate veritatis doloremque natus
            minus optio aut praesentium? Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit at, ad
            porro corporis fugit sed. Velit perspiciatis sed magni architecto maiores dolore vitae, vero reiciendis,
            officia similique consequuntur accusantium pariatur.</p>
    </div>

</body>

</html>